<template>
	<view class="bookingdetails">
		<view class="type">
			<view class="iconfont icon-wancheng"></view>
			<view class="success">预约成功</view>
		</view>
		<view class="detailBox">
			<view class="title">就诊医院</view>
			<view class="detail">{{ Data.list.parkName}}</view>
		</view>
		<view class="detailBox">
			<view class="title">医院地址</view>
			<view class="detail">{{Data.newaddress}}</view>
			<text @click="goMapNavigation" class="iconfont icon-daohang-"></text>
		</view>
		<view class="detailBox">
			<view class="title">报道地点</view>
			<view class="detail">{{ Data.list.place }}</view>
		</view>
		<view class="detailBox">
			<view class="title">预约项目</view>
			<view class="detail">{{  Data.list.packageName}}</view>
		</view>
		<view class="detailBox">
			<view class="title">报道时间</view>
			<view class="detail">{{ Data.newappointmentTime }}</view>
		</view>
		<view class="detailBox">
			<view class="title">候诊时间</view>
			<view class="detail">{{ Data.list.waitingTime}}</view>
		</view>
		<view class="detailBox">
			<view class="title">费用</view>
			<view class="detail">{{Data.list.sum }}</view>
		</view>
		<view class="detailBox">
			<view class="title">预约时间</view>
			<view class="detail">{{Data.newcreateTime}}</view>
		</view>
		<view class="detailBox">
			<view class="title">就诊人</view>
			<view class="detail">{{Data.list.patientName }}</view>
		</view>
		<view class="detailBox">
			<view class="title">身份证号</view>
			<view class="detail">{{ Data.list.cardNum}}</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive ,onMounted} from 'vue';
import {appointmentData} from "@/api/ExaminationService.js";

let Data=reactive({
	list:{},
	newappointmentTime:{},
	newcreateTime:{},
	newaddress:"",

})

let cancel = ref(null);

// 跳转到地图导航
let goMapNavigation = () => {
	uni.navigateTo({
		url: '/pages/nucleicAcidTesting/mapNavigation/mapNavigation'
	});
};
let fn=()=>{
	// Data.list.appointmentTime.substring(10,' ');
	
}

const ProjectDetailsFn = id => {
	appointmentData({ id:1 })
		.then(({ data }) => {
			Data.list=data.data;
			Data.newappointmentTime=Data.list.appointmentTime.substring(10,' ');
			Data.newcreateTime=Data.list.createTime.substring(10,' ');
			Data.newaddress=Data.list.city+Data.list.district+Data.list.street;
		})
		.catch(err => {
			console.log(err);
		});
};

onMounted(() => {
	console.log(Data)
	
	ProjectDetailsFn()
	
});


</script>
<style scoped="" lang="less">
.bookingdetails {
	width: 694rpx;
	border: 1px #f4f4f4 solid;
	margin: 24rpx;

	.type {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon-wancheng {
			font-size: 98rpx;
			margin: 24rpx 0;
			color: #006eff;
		}

		.success {
			font-size: 38rpx;
		}
	}

	.confirmBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 34rpx 0;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 4rpx;
		}

		view {
			color: #5c645b;
			font-size: 30rpx;
			margin-left: 26rpx;

			text {
				color: #717677;
				font-size: 26rpx;
				margin-left: 14rpx;
			}
		}
	}

	.detailBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: ;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 36rpx 0;

		.title {
			width: 120rpx;
			height: 34rpx;
			font-size: 28rpx;
			color: #cbbdbf;
			text-align: justify;
			text-align-last: justify;
		}

		.detail {
			color: #6e726e;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.active {
			color: #f4636f;
		}

		.iconfont {
			margin-left: 34rpx;
			color: #1f80ff;
			font-weight: 700;
		}
	}
}
</style>

